<template>
  <view class="container" :style="{ 'background-image': 'url(' + bgimg + ')' }">
    <!-- 产品分类按钮 -->
    <button class="orange-btn" @click="showProductCategory">产品分类</button>

    <!-- 全国门店导航按钮 -->
    <button class="orange-btn" @click="showStoreMap">全国门店导航</button>

    <!-- 需要送检商城产品展示按钮 -->
    <button class="orange-btn" @click="showProductDisplay">需要送检商城产品展示</button>

    <!-- 购物车按钮 -->
    <button class="orange-btn" @click="goToShoppingCart">购物车</button>

    <!-- 我的资料按钮 -->
    <button class="orange-btn" @click="showProfile">我的资料</button>
  </view>
</template>

<script>
export default {
  onLoad(option)
  {
    this.type = option.type ? option.type :""
  },
  data()
  {
    return {
      type:"",
      bgimg:"http://luxuries.h1668.com/uploads/20231207/b620d37f5c96abc4d2c4c0cacbf3bf9b.jpg"

    }
  },
  methods: {
    // 产品分类
    showProductCategory() {
      // TODO: 处理产品分类的逻辑
    },

    // 全国门店导航
    showStoreMap() {
      // TODO: 处理全国门店导航的逻辑
    },

    // 需要送检商城产品展示
    showProductDisplay() {
      // TODO: 处理需要送检商城产品展示的逻辑
    },

    // 购物车
    goToShoppingCart() {
      // TODO: 处理跳转到购物车的逻辑
    },

    // 我的资料
    showProfile() {
      // TODO: 处理我的资料的逻辑
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  background: url("../../static/images/user/bg.jpg");
}

.orange-btn {
  background-color: orange;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  margin-bottom: 20px;
}
</style>